<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
    .table th{
        text-align: center;
        vertical-align: middle!important;
    }
    .border_specs{
        border:1px solid #b4bcc2;
        width:80%;
    }
    .border_attr{
        border:1px solid #b4bcc2;
        width:50%;
        margin-bottom: 2%;
        display: inline-flex;
        margin-right: 10%;
    }
    .del_attr{
        width:30px;
        height:25px;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Specs/index')}">规格列表</a></li>
        <li class="active"><a href="#">规格添加</a></li>
    </ul>
    <form action="{:url('Specs/save')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">商品分类<span class="form-required">*</span></th>
                        <td>
                            <select class="form-control" name="shop_id" style="width:200px;">
                                <foreach name="shop_category" item="vo" key="key">
                                    <option value="{$key}">{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>规格组<span class="form-required">*</span></th>
                        <td>
                            <a class="btn btn-default" id="add">添加规格组</a>
                        </td>
                    </tr>
                    <tr>
                        <table class="table table-hover table-bordered table-list" id="append">
                            <tr bgcolor="#f8f9fa">
                                <th>规格组名称</th>
                                <th>规格项</th>
                                <th style="width:40%;">添加参数</th>
                                <th>操作</th>
                            </tr>
                        </table>
                    </tr>
                </table>
                <div class="form-group" style="margin-top:50px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                        <a class="btn btn-default" href="{:url('Specs/index')}">{:lang('BACK')}</a>
                    </div>
                </div>

            </div>

        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        $('.btn-cancel-logo').click(function () {
            $('#logo-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#logo').val('');
        });

        //动态添加规格组
        $('#add').click(function(){
            //获取最后一个tr
            var last = $('#append').children('tbody').children('tr').last().attr('class');
            if(last == undefined){
                last = 0;
            }else{
                last = Number(last)+1;
            }
            var html = '';
            html += '<tr align="center" class="'+last+'">';
            html += '<td>';
            html +='<input type="text" class="form-control border_specs" required name="specs_name['+last+']">';
            html +='</td>';

            html +='<td>';
            html +='<a class="btn btn-default add_attr">添加</a>';
            html +='</td>';

            html +='<td>';
            html += '</td>';

            html += '<td>';
            html += '<a class="btn btn-danger del">移除</a>';
            html += '</td>';
            html += '</tr>';
            $('#append tbody').append(html);
        });

        //动态添加参数
        $(document).on('click','.add_attr',function(){
            //获取当前所在列索引
            var this_index = $(this).parents('tr').attr('class');
            var html = '';
            html+='<div class="attr_name">';
                html +='<input type="text" class="form-control border_attr" required name="attr_name['+this_index+'][]">';
                html +='<a class="form-control btn btn-danger btn-sm glyphicon glyphicon-remove del_attr"></a>';
            html+='</div>';
            $(this).parent('td').next('td').append(html);
        });
        //动态移除参数
        $(document).on('click','.del_attr',function(){
            $(this).parent('.attr_name').remove();
        });
        //移除规格组
        $(document).on('click','.del',function(){
            $(this).parent('td').parent('tr').remove();
        });
    });
</script>
</body>
</html>
